<template>
  <view>
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">{{$t('所在港铁')}}</block>
      <block slot="right">
        <view class="text-df" @click.stop="submit" style="color: #0181FF;">{{$t('确定')}}</view>
      </block>
    </fu-custom>
    <view class="flex text-df container">
      <view class="container-left">
        <view class="items" :class="item.aid==bigId ? 'active' : ''" v-for="(item,index) in dataList" :key="index"
          @click="choosebig(item)">
          {{item.name}}
        </view>
      </view>
      <view class="container-right">
        <view class="margin-left-sm items" :class="itemC.aid==liliId ? 'active' : ''"
          v-for="(itemC,indexC) in litileList" :key="indexC" @click="chooseItem(itemC)">
          {{itemC.name}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataList: [],
        litileList: [],
        chooseItemArr: [],
        type: '',
        addr_id: '',
        bigId: '',
        bigName: '',
        liliId: '',
        liliName: ''
      }
    },
    onLoad(options) {
      if(options.bigId){
        this.bigId=options.bigId
      }
      if(options.bigItemId){
        this.liliId=options.bigItemId
      }
      if(options.bigName){
        this.bigName=options.bigName
      }
      if(options.bigItemName){
        this.liliName=options.bigItemName
      }
      this.getData()
    },
    methods: {
      choosebig(item) {
        this.bigId = item.aid
        this.bigName = item.name
        this.litileList = item.children
      },
      chooseItem(item) {
        if (!this.bigId) {
          this.$message.info(this.$t('请先选择左边所在港铁'))
          return;
        }
        this.liliId = item.aid
        this.liliName = item.name
      },
      getData() {
        this.$api.post(global.apiUrls.post65839ead407bb, {
          addr_id: this.addr_id
        }).then(res => {
          this.dataList = res.data.data
          this.litileList = this.dataList[0].children
          if (!this.bigId) {
            this.litileList = this.dataList[0].children
          } else {
            this.litileList = this.dataList.filter(item => item.aid == this.bigId)[0].children
          }
        })
      },
      submit() {
        if (!this.liliId) {
          this.$message.info(this.$t('请选择所在港铁'))
          return;
        }
        let chooseobj = {
          bigId: this.bigId,
          bigItemId: this.liliId,
          bigName: this.bigName,
          bigItemName: this.liliName,
        }
        uni.$emit('mrtobj', chooseobj)
        this.$urouter.navigateBack(1);
      },
    }
  }
</script>

<style lang="scss">
  .container {
    width: 100%;
    overflow-y: scroll;

    .items {
      height: 100rpx;
      line-height: 100rpx;
      color: #333;

      &.active {
        color: #0181FF;
        background: #FFF;
      }
    }

    .container-left {
      width: 20%;
      text-align: center;

    }

    .container-right {
      background-color: #FFF;
      width: 80%;
      text-align: left;
    }
  }
</style>
